<template>
  <div class="outerBox">
    <div class="innerBox">
      <el-card class="box-card">
        <template v-slot:header>
          <div class="clearfix">
            <span>文章分类</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="primary"
              @click="dialogFormVisible = true"
            >添加分类</el-button
            >
          </div>
        </template>
        <el-table style="width: 100%" :data="ArticleList" border stripe>
          <el-table-column label="序号" width="100" type="index"></el-table-column>
          <el-table-column label="分类名称" prop="cate_name"></el-table-column>
          <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="primary" size="mini" @click="changeArticleInfo(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteArticleListItem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
<!--      提示框-->
      <el-dialog
        title="添加信息"
        :visible.sync="dialogFormVisible"
      >
        <template v-slot:default>
          <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
            <el-form-item label="分类名称" prop="cate_name">
              <el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="cate_alias">
              <el-input v-model="addForm.cate_alias" minlength="1" maxlength="15"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template v-slot:footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addArticle">提交</el-button>
          </div>
        </template>
      </el-dialog>
<!--      提示框-->
      <el-dialog
        title="更改信息"
        :visible.sync="changeMsg"
      >
        <template v-slot:default>
          <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
            <el-form-item label="分类名称" prop="cate_name">
              <el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="cate_alias">
              <el-input v-model="addForm.cate_alias" minlength="1" maxlength="15"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template v-slot:footer>
          <div class="dialog-footer">
            <el-button @click="changeMsg = false">取 消</el-button>
            <el-button type="primary" @click="confirmChangeArticle">提交</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getArticleClassification, addArticle, changeArticleMsg, deleteArticleMsg } from '@/api'

export default {
  name: 'article-classification',
  data () {
    return {
      ArticleList: [],
      dialogFormVisible: false,
      changeMsg: false,
      userId: '',
      addForm: { // 添加表单的数据对象
        cate_name: '',
        cate_alias: ''
      },
      addRules: { // 添加表单的验证规则对象
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async addArticle () {
      const data = {
        cate_name: this.addForm.cate_name,
        cate_alias: this.addForm.cate_alias
      }
      const res = await addArticle(data)
      if (res.data.code === 0) {
        this.$message.success(res.data.message)
        this.addForm.cate_name = ''
        this.addForm.cate_alias = ''
      } else {
        this.$message.error(res.data.message)
      }
      await this.getArticleList()
      this.dialogFormVisible = false
    },
    async getArticleList () {
      const res = await getArticleClassification()
      this.ArticleList = res.data.data
    },
    async confirmChangeArticle () {
      const data = {
        id: this.userId,
        cate_name: this.addForm.cate_name,
        cate_alias: this.addForm.cate_alias
      }
      const res = await changeArticleMsg(data)
      if (res.data.code === 0) {
        this.$message.success(res.data.message)
      } else {
        this.$message.error(res.data.message)
      }
      await this.getArticleList()
      this.changeMsg = false
    },
    async deleteArticleListItem (row) {
      const res = await deleteArticleMsg({ id: row.id })
      if (res.data.code === 0) {
        this.$message.success(res.data.message)
      } else {
        this.$message.error(res.data.message)
      }
      await this.getArticleList()
    },
    changeArticleInfo (row) {
      this.changeMsg = true
      this.userId = row.id
    }
  },
  mounted () {
    this.getArticleList()
  }
}
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
.outerBox{
  width: 100%;
  height: 500px;
  box-sizing: border-box;
}
.innerBox{
  width: 98%;
  height: 100%;
  margin: 20px auto;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.el-button{
  width: 100px;
  height: 30px;
}
</style>
